<template>
  <button class="niu-btn"
          :class="[type?'niu-btn-'+type: '',textButton?'niu-btn-text': '', disabled?'disabled':'',lineButton?'niu-btn-line':'',mini? 'niu-btn-mini' : '', plain? 'niu-btn-plain':'']"
          @click="btnClick">
    <i class="el-icon-loading loading" v-if="loading"></i>
    <slot></slot>
  </button>
</template>

<script>
	export default {
		name: "niuButton",
		props: {
			type: {
				type: String,
				default: () => {
					return '';
				}
			},
			textButton: {
				type: Boolean,
				default: () => {
					return false;
				}
			},
			plain: {
				type: Boolean,
				default: () => {
					return false;
				}
			},
			lineButton: {
				type: Boolean,
				default: () => {
					return false;
				}
			},
			mini: {
				type: Boolean,
				default: () => {
					return false;
				}
			},
			disabled: {
				type: Boolean,
				default: () => {
					return false;
				}
			},
			loading: {
				type: Boolean,
				default: () => {
					return false;
				}
			},
		},
		data() {
			return {};
		},
		computed: {},
		watch: {},
		components: {},
		methods: {
			btnClick() {
				if (!this.disabled && !this.loading) this.$emit('click', '');
			}
		},
		mounted() {
		},
		created() {
		}
	}
</script>

<style scoped lang="less">

  @defaultBorderColor: #C7CBD1;
  @defaultBgColor: rgba(216, 216, 216, 0);
  @defaultActiveBgColor: #F9FBFF;

  @primaryActiveBgColor: #006AE0;

  @lineActiveBgColor: #006AE0;

  @disabledColor: #f5f7fa;
  .niu-btn {
    display: inline-block;
    cursor: pointer;
    padding: 0 24px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    border-radius: 4px;
    outline: none;

    border: 1px solid @defaultBorderColor;
    background: @defaultBgColor;
    color: @fontColor;

    &:hover {
      opacity: 0.5;
    }

    &:active, &:focus {
      background: @defaultActiveBgColor;
    }

    &.disabled {
      cursor: not-allowed;
      background: @disabledColor;

      &:hover {
        opacity: 1;
      }
    }

    &-primary {
      border-color: @allPrimaryColor;
      background: @allPrimaryColor;
      color: @allWhite;

      &:hover {
        opacity: 0.7;
      }

      &:active, &:focus {
        background: @primaryActiveBgColor;
      }

      &.disabled {
        background: @allPrimaryColor;
        opacity: 0.2;

        &:hover {
          opacity: 0.2;
        }
      }
      &.niu-btn-plain{
        background: @allBgBlue;
        border-color: transparent;
        color: @allPrimaryColor;
      }
    }

    &-danger {
      border-color: @allDangerColor;
      background: @allDangerColor;
      color: @allWhite;

      &:hover {
        opacity: 0.7;
      }

      &:active, &:focus {
        background: @allDangerColor;
      }

      &.disabled {
        background: @allDangerColor;
        opacity: 0.2;

        &:hover {
          opacity: 0.2;
        }
      }
    }

    &-warring {
      border-color: @allWarringColor;
      background: @allWarringColor;
      color: @allWhite;

      &:hover {
        opacity: 0.7;
      }

      &:active, &:focus {
        background: @allWarringColor;
      }

      &.disabled {
        background: @allWarringColor;
        opacity: 0.2;

        &:hover {
          opacity: 0.2;
        }
      }
    }

    &-line {
      border-color: @allPrimaryColor;
      background: @allWhite;
      color: @allPrimaryColor;

      &:hover {
        opacity: 1;
        background: @allPrimaryColor;
        color: @allWhite;
      }

      &:active, &:focus {
        background: @lineActiveBgColor;
        color: @allWhite;
      }

      &.disabled {
        opacity: 1;
        background: @allWhite;
        border-color: @disabledColor;
        color: @disabledColor;

        &:hover {
          opacity: 1;
          background: @allWhite;
          border-color: @disabledColor;
          color: @disabledColor;
        }
      }

      &.niu-btn-danger {
        border-color: @allDangerColor;
        background: @allWhite;
        color: @allDangerColor;

        &:hover {
          background: @allDangerColor;
          color: @allWhite;
        }

        &.disabled {
          background: @allWhite;
          border-color: @allDangerColor;
          color: @disabledColor;
          opacity: 0.2;

          &:hover {
            opacity: 0.2;
          }
        }
      }
      &.niu-btn-warring {
        border-color: @allWarringColor;
        background: @allWhite;
        color: @allWarringColor;

        &:hover {
          background: @allWarringColor;
          color: @allWhite;
        }

        &.disabled {
          background: @allWhite;
          border-color: @allWarringColor;
          color: @disabledColor;
          opacity: 0.2;

          &:hover {
            opacity: 0.2;
          }
        }
      }
    }

    &-text {
      padding: 0;
      height: auto;
      line-height: 1;
      border: none;
      background: none;
      color: @allPrimaryColor;

      &:hover {
        border: none;
        background: none;
        color: @allPrimaryColor;
        opacity: .8;
      }

      &:active, &:focus {
        border: none;
        background: none;
        color: @allPrimaryColor;
        opacity: .8;
      }
      &.niu-btn-danger {
        color: @allDangerColor;
      }
      &.niu-btn-warring {
        color: @allWarringColor;
      }

      &.disabled {
        opacity: 1;
        border: none;
        background: none;
        color: @fontGrayColor;

        &:hover {
          opacity: 1;
          border: none;
          background: none;
          color: @fontGrayColor;
        }
      }
    }
    &-mini{
      padding: 0 15px;
      height: 32px;
      line-height: 32px;
      font-size: 12px;
    }

    .loading {
      margin-right: 4px;
    }
  }

  @media screen and (max-width: 1600px) {
    .niu-btn {
      padding: 0 16px;

      &-text {
        padding: 0;
      }
    }
  }
</style>
